/<template>
  <el-dialog :visible.sync="dialogVisible" title="指标树配置" append-to-body>
    <div class="flow">
      <div class="flow-title">
        <div class="flow-root">
          <span>规划方案评估</span>
        </div>
      </div>
      <div class="flow-intermediate">
        <div class="flow-second-title">
          <span>任务效益</span>
        </div>
        <div class="flow-second-title">
          <span>方案效益</span>
        </div>
        <div class="flow-second-title">
          <span>成像质量</span>
        </div>
      </div>
      <div class="flow-flex">
        <span>
          <el-button type="prymary" size="small" @click="hadnleCheckAll"
            >全选</el-button
          >
        </span>
        <ul class="flex flow-warrap">
          <li
            v-for="(item, index) in flowItems"
            :key="index"
            class="flow-item"
            :style="{ marginLeft: item.ml + '%' }"
          >
            <span
              :class="['flow-item-text', item.isActive ? 'Highlight' : '']"
              @click="handleNodeClick(index, item)"
              >{{ item.label }}</span
            >
            <el-input
              maxlength="10"
              v-no-space
              v-max-length-tip="10"
              v-model="item.value"
              :readonly="!item.isActive"
              class="flow-input"
            ></el-input>
          </li>
        </ul>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSaveWeight"
        >完成权重配置</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    weightCallback: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      dialogVisible: false,
      flowItems: [
        {
          label: '任务完成率',
          value: 0,
          isActive: false,
          ml: 9
        },
        {
          label: '观测时效性均值',
          value: 0,
          isActive: false,
          ml: 22
        },
        {
          label: '观测时效性方差',
          value: 0,
          isActive: false,
          ml: 3
        },
        {
          label: '卫星负载均衡',
          value: 0,
          isActive: false,
          ml: 3
        },
        {
          label: '侧摆角均值',
          value: 0,
          isActive: false,
          ml: 7
        },
        {
          label: '侧摆角方差',
          value: 0,
          isActive: false,
          ml: 3
        },
        {
          label: '太阳高度角均值',
          value: 0,
          isActive: false,
          ml: 3
        },
        {
          label: '太阳高度角方差',
          value: 0,
          isActive: false,
          ml: 3
        }
      ]
    }
  },
  methods: {
    // 调用算法，开始更新页面表格
    // 保存权重配置
    handleSaveWeight() {
      let total = 0
      this.flowItems.forEach(item => {
        total += parseFloat(item.value)
      })
      if (total > 1) {
        // 计算输入的权重总值是否超过1
        return this.$message.warning('权重总值不能超过1')
      } else if (total < 1) {
        // 计算输入的权重总值是否小于1
        return this.$message.warning('权重总值不能小于1')
      }

      this.dialogVisible = false
      this.$emit('weightCallback', this.flowItems)
    },
    // 全选
    hadnleCheckAll() {
      // 已经点了全选，就把高亮的去掉类名
      this.flowItems.forEach(item => {
        item.isActive = true
        item.value = 0.125
      })
    },
    handleNodeClick(index, row) {
      if (row.isActive) {
        row.isActive = false
        row.value = 0
      } else {
        row.isActive = true
      }
    },
    showDialog() {
      this.dialogVisible = true
    },
    completeCallback() {
      this.dialogVisible = false
    }
  }
}
</script>

<style>
.flow {
  width: 100%;
  height: 100%;
}
.flow-title {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flow-root {
  width: 20%;
  height: 56px;
  line-height: 56px;
  margin-bottom: 20px;
  background: url('~@/assets/img/train/train2.png') no-repeat;
  background-size: 100% 100%;
  font-size: 20px;
}
.flow-intermediate {
  display: flex;
  justify-content: space-around;
}

.flow-second-title {
  width: 15%;
  height: 56px;
  line-height: 56px;
  margin-bottom: 20px;
  background: url('~@/assets/img/train/train5.png') no-repeat;
  background-size: 100% 100%;
  font-size: 20px;
  text-align: center;
}
.flow-flex {
  display: flex;
  align-items: flex-end;
}
.flow-warrap {
  display: flex;
  flex: 1;
}
.flow-item {
  width: 54px;
}
.flow-item-text {
  margin-bottom: 16px;
  width: 100%;
  height: 250px;
  line-height: 48px;
  writing-mode: vertical-rl;
  text-align: center;
  background: url('~@/assets/img/train/train1.png') no-repeat;
  background-size: 100% 100%;
}
.Highlight {
  background: url('~@/assets/img/train/train3.png') no-repeat;
  background-size: 100% 100%;
}
.flow-input {
  width: 70px;
  margin-left: -10px;
}
</style>
